<template>
    <div class="order">
        <div class="order-header">
            <div class="order-header-num">
                <p>订单号：{{ data.num }}</p>
            </div>
            <div class="order-header-status">
                <p v-if="data.status == '1'">等待支付</p>
                <p v-if="data.status == '2'">待收货</p>
                <p v-if="data.status == '3'">待评价</p>
            </div>
        </div>
        <div class="order-body">
            <van-card 
                :num="data.ordernum" 
                :price="data.price" 
                :desc="data.descs" 
                :title="data.title"
                :thumb="data.image" />
        </div>
        <div class="order-footer">
            <div class="order-footer-text">
                <p>数量</p>
            </div>
            <div class="order-footer-num">
                <p>共{{ data.totalnum }}件<span class="iconfont icon-jiantouyou"></span></p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"

interface IItem{
  id:number,
  descs:string,
  image:string,
  num:string,
  ordernum:string,
  price:string,
  status:string,
  title:string,
  totalnum:string
}

const props = defineProps<{
    data:IItem|any
}>()



</script>
<style lang="less" scoped>
.order {
    background: #fff;
    margin-top: 5px;
    .order-header {
        display: flex;
        padding: 10px;

        .order-header-num {
            flex: 1;

            p {
                font-size: 12px;
            }
        }

        .order-header-status {
            flex: 1;
            text-align: right;

            p {
                font-size: 12px;
                color: #FF4444;
            }
        }
    }

    .order-body {
        background: #fff;
    }

    .order-footer {
        display: flex;
        padding: 10px;

        .order-footer-text {
            flex: 1;
            font-size: 14px;
        }

        .order-footer-num {
            flex: 1;
            font-size: 14px;
            text-align: right;

            span {
                font-size: 12px;
            }
        }
    }
}
</style>